<template>
  <div class="top-right-btn" style="display: inline-block" :style="style">
    <el-row>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button circle icon="Refresh" @click="refresh()" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="列设置" placement="top" v-if="columns">
        <div style="margin-left: 12px">
          <el-button circle icon="Menu" @click="colSetting.visible = true"/>
          <el-drawer v-model="colSetting.visible" direction="rtl">
            <template #header>
              列设置
            </template>
            <template #default>
              <el-row>
                <el-checkbox v-model="allShow" @change="checkboxAllShow()" style="font-weight: bold;">全选/全不选</el-checkbox>
              </el-row>
              <draggable v-model="columns" group="people" item-key="prop">
                <template #item="{element}">
                  <el-row v-if="element.type !== 'selection'">
                    <el-checkbox v-model="element.show">{{element.label}}</el-checkbox>
                  </el-row>
                </template>
              </draggable>
            </template>
          </el-drawer>
        </div>
      </el-tooltip>
    </el-row>
  </div>
</template>

<script setup>
import draggable from 'vuedraggable'
import {ref, computed, defineEmits, defineModel, defineProps} from "vue";
import {ElButton, ElCheckbox, ElDrawer, ElRow, ElTooltip} from "element-plus";
const columns = defineModel('columns',{
  type: Array,
  default: []
});
const colSetting = ref({
  visible: false,
})

const allShow = computed(() => {
  return columns.value.filter(item => item.type !== 'selection').every(item => item.show);
});

const props = defineProps({
  /* 是否显示检索条件 */
  showSearch: {
    type: Boolean,
    default: true,
  },
  /* 是否显示检索图标 */
  search: {
    type: Boolean,
    default: true,
  },
  /* 右外边距 */
  gutter: {
    type: Number,
    default: 10,
  },
})

const emits = defineEmits(['update:showSearch', 'queryTable']);

const style = computed(() => {
  const ret = {};
  if (props.gutter) {
    ret.marginRight = `${props.gutter / 2}px`;
  }
  return ret;
});

// 搜索
function toggleSearch() {
  emits("update:showSearch", !props.showSearch);
}

// 刷新
function refresh() {
  emits("queryTable");
}

// 全选或者全不选
function checkboxAllShow() {
  if(allShow.value){
    columns.value.filter(item=>item.type !== 'selection').forEach(column => column.show = false);
  }else{
    columns.value.filter(item=>item.type !== 'selection').forEach(column => column.show = true);
  }
}

</script>

<style lang='scss' scoped>
:deep(.el-transfer__button) {
  border-radius: 50%;
  display: block;
  margin-left: 0px;
}
:deep(.el-transfer__button:first-child) {
  margin-bottom: 10px;
}
:deep(.el-dropdown-menu__item) {
  line-height: 30px;
  padding: 0 17px;
}
</style>
